;(function () {
	let chart1 = echarts.init(document.querySelector('.mid>.item1 .box1'))

	let chart2 = echarts.init(document.querySelector('.mid>.item1 .box2'))
	let chart3 = echarts.init(document.querySelector('.mid>.item1 .box3'))

	option1 = {
		tooltip: {
			trigger: 'item',
		},
		legend: {
			top: '5%',
			left: 'center',
		},
		title: {
			text: '标题样式',
			textStyle: {
				color: '#fff',
				fontWeight: 100,
				fontSize: 16,
			},

			left: 'center',
			top: 10,
		},
		legend: {
			show: false,
		},
		series: [
			{
				name: 'Access From',
				type: 'pie',
				radius: [45, 60],
				avoidLabelOverlap: false,
				label: {
					show: false,
					position: 'center',
				},
				label: {
					normal: {
						show: true,
						position: 'center',
						formatter: function (argument) {
							var html
							html = 523
							return html
						},
						textStyle: {
							fontSize: 15,
							color: '#00c0ef',
						},
					},
				},

				labelLine: {
					show: false,
				},
				data: [{ value: 1048 }, { value: 735, name: 'Direct' }],
			},
		],
	}
	chart1.setOption(option1)

	option2 = {
		tooltip: {
			trigger: 'item',
		},
		legend: {
			top: '5%',
			left: 'center',
		},
		title: {
			text: '标题样式',
			textStyle: {
				color: '#fff',
			},
		},
		series: [
			{
				name: 'Access From',
				type: 'pie',
				radius: ['40%', '70%'],
				avoidLabelOverlap: false,
				label: {
					show: false,
					position: 'center',
				},

				labelLine: {
					show: false,
				},
				data: [{ value: 1048 }, { value: 735, name: 'Direct' }],
			},
		],
	}
	chart2.setOption(option1)

	option3 = {
		tooltip: {
			trigger: 'item',
		},
		legend: {
			top: '5%',
			left: 'center',
		},
		title: {
			text: '标题样式',
			textStyle: {
				color: '#fff',
			},
		},
		series: [
			{
				name: 'Access From',
				type: 'pie',
				radius: ['40%', '70%'],
				avoidLabelOverlap: false,
				label: {
					show: false,
					position: 'center',
				},

				labelLine: {
					show: false,
				},
				data: [{ value: 1048 }, { value: 735, name: 'Direct' }],
			},
		],
	}
	chart3.setOption(option1)

	window.addEventListener('resize', () => {
		chart1.resize()
	})
	window.addEventListener('resize', () => {
		chart2.resize()
	})
	window.addEventListener('resize', () => {
		chart3.resize()
	})
})()
